import React, { useEffect, useState } from 'react';
import styles from './index.module.css';
import CustomIcon from '@/components/CustomIcon';
import { Overlay, Icon, Input, Button, Checkbox } from '@alicloudfe/components';
import AtomIntl from '@/utils/intl';

const { Popup } = Overlay;

interface IProps {
  visible: boolean;
  questionList: string[];
  setQuestionList?: (list: string[]) => void;
  onSelect?: (item: string) => void;
  hideWindow: () => void;
  closeHistory: () => void;
}

export default function ChatHistory(props: IProps) {
  const {
    questionList = [],
    setQuestionList = () => {},
    onSelect = () => {},
    hideWindow = () => {},
    closeHistory = () => {},
  } = props;
  const [innerVisible, setInnerVisible] = useState(false);
  useEffect(() => {
    setInnerVisible(props.visible);
  }, [props.visible]);

  const [isDeleting, setIsDeleting] = useState(false);

  const hasQuestions = questionList.length > 0;

  const [selected, setSelected] = useState<Array<{
    item: string;
    index: number;
  }>>([]);

  const handleSelectQuestion = (question: string, index: number) => {
    if (isDeleting) {
      const isSelected = selected.find((i) => i.item === question && i.index === index);
      if (isSelected) {
        setSelected(selected.filter((i) => i != isSelected));
      } else {
        setSelected([
          ...selected,
          {
            item: question,
            index,
          },
        ]);
      }
    } else {
      onSelect(question);
    }
  };
  const allIsSeelcted = hasQuestions && questionList.every((item, index) => !!selected.find((i) => i.item === item && i.index === index));
  const deleteSelected = () => {
    const remainedQuestionList = questionList.filter((item, index) => !selected.find((i) => i.item === item && i.index === index));
    setQuestionList(remainedQuestionList);
    setSelected([]);
  };

  const [searchInput, setSearchInput] = useState('');

  const filteredQuestionList = questionList.filter((i) => i.includes(searchInput));

  return (
    <div
      className={styles.historyContainer}
      style={{
        transform: innerVisible ? 'translateX(0)' : 'translateX(100%)',
      }}
    >
      <div className={styles.chatTitleLine}>
        <div
          className={styles.operation}
          onClick={closeHistory}
        >
          <CustomIcon type="icon-projectOicon-projectOcla-reverse" />
        </div>

        <div className={styles.modelInfos}>
          <div className={styles.modelName}>
            {AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_历史记录')}
          </div>
        </div>

        <div
          className={styles.operation}
          onClick={hideWindow}
        >
          <CustomIcon type="icon-projectOdelete2-fill" />
        </div>
      </div>

      <div className={styles.main}>

        <div className={styles.operationLine}>
          {
            isDeleting ? (
              <div className={styles.deleteOperations}>
                <Button.Group>
                  <Button
                    onClick={() => {
                      if (allIsSeelcted) {
                        setSelected([]);
                      } else {
                        const temp = questionList.map((item, index) => {
                          return {
                            item,
                            index,
                          };
                        });
                        setSelected(temp);
                      }
                    }}
                  >
                    <Checkbox
                      checked={allIsSeelcted}
                    />
                    {AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_全选')}
                  </Button>
                  <Button
                    warning
                    onClick={() => {
                      deleteSelected();
                    }}
                    disabled={!selected.length}
                  >
                    <CustomIcon type="icon-projectOdelete-line" />
                    {AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_删除')}
                  </Button>
                  <Button
                    onClick={() => {
                      setIsDeleting(false);
                    }}
                  >
                    <CustomIcon type="icon-projectOfalse-line" />
                    {AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_退出')}
                  </Button>
                </Button.Group>
              </div>
            ) : (
              <div className={styles.searchOperation}>
                <div style={{ flex: 1 }}>
                  <Input
                    innerBefore={
                      <Icon type="search" style={{ margin: 4 }} />
                    }
                    style={{
                      width: '100%',
                    }}
                    hasClear
                    placeholder={AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_搜索历史记录')}
                    value={searchInput}
                    onChange={(value) => {
                      setSearchInput(value);
                    }}
                  />
                </div>
                <Button
                  className={styles.deleteIcon}
                  text
                  disabled={!hasQuestions}
                  onClick={() => {
                    setSearchInput('');
                    setIsDeleting(true);
                  }}
                >
                  <CustomIcon type="icon-projectOdelete-line" />
                </Button>
              </div>
            )
          }
        </div>
        <div className={styles.historyList}>
          {
            hasQuestions ? (
              filteredQuestionList.map((item, index) => {
                return (
                  <Popup
                    // eslint-disable-next-line react/no-array-index-key
                    key={`${item}-${index}`}
                    v2
                    trigger={
                      <div
                        className={styles.historyItem}
                        onClick={() => {
                          handleSelectQuestion(item, index);
                        }}
                      >
                        {
                          isDeleting && (
                            <div>
                              <Checkbox
                                checked={!!selected.find((i) => i.item === item && i.index === index)}
                              />
                            </div>
                          )
                        }
                        <div className={styles.historyContent}>
                          {item}
                        </div>
                      </div>
                    }
                    triggerType="hover"
                  >
                    <div className={styles.historyAllContentContainer}>
                      {item}
                    </div>
                  </Popup>
                );
              })
            ) : (
              <div>
                {AtomIntl.get('AI_Chat_ChatWindow_ChatHistory_index_暂无历史记录')}
              </div>
            )
          }
        </div>
      </div>
    </div>
  );
}

